<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>注册</title>

  <script src="/jquery.js"></script>

  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
  <script src="/md5.js"></script>

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    body {
      width: 100%;
      height: 100%;
      background-image: url("/back.jpg");
      background-size: 100% 100%;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    #iframe {
      visibility: hidden;
    }
  </style>


  <!-- Custom styles for this template -->
  <link href="../static/css/signin.css" rel="stylesheet">
</head>

<body class="text-center">

  <form class="form-signin" target="iframe">
    <h1 class="h3 mb-3 font-weight-normal" style="color: white;">请注册</h1>
    <label for="inputEmail" class="sr-only">请输入用户名</label>
    <input name="user" id="inputEmail" class="form-control" placeholder="请输入用户名" required autofocus
      style="display: inline;">
    <label for="inputPassword" class="sr-only">请输入密码</label>
    <input name="pwd" type="password" id="inputPassword" class="form-control" placeholder="请输入密码 6-10位的字母数字组合" required>
    <label for="inputAgain" class="sr-only">确认密码</label>
    <input name="pwdagain" type="password" id="inputAgain" class="form-control" placeholder="确认密码" required>
    <span id="warn1" style="display:inline;color: white;">密码长度不符合</span>

    <span id="warn2" style="color: white;visibility: hidden;">两次输入不一致</span>
    <button class="btn btn-lg btn-primary btn-block" type="button" onclick="subm()">注册</button>
    <p style="color: white;">众测解决方案部</p>
  </form>
  <!-- <iframe name="iframe" id="iframe"></iframe> -->

</body>

<script>
  const subm = () => {
    if ($("input[name='pwd']").val() !== $("input[name='pwdagain']").val()) {
      alert("两次密码输入不一致");
    }
    else if ($("input[name='pwd']").val().length < 6 || $("input[name='pwd']").val().length > 10) {
      alert("密码长度不符合要求")
    }
    else {
      $.ajax({
        type: 'POST',
        url: '/signup',
        data: { username: $("input[name='user']").val(), password: md5($("input[name='pwd']").val()) },
        success: function (res) {
          if (res == 0) {
            alert("此用户名已被注册");
          }
          else {
            alert("注册成功");
            window.location.href = "/login";
          }

        }
      });
    }
  };

  $(function () {
    $("input[name='pwdagain']").bind("input propertychange", function () {
      if ($("input[name='pwd']").val() != $("input[name='pwdagain']").val()) {
        $("#warn2").css('visibility', 'visible');
      }
      else $("#warn2").css('visibility', 'hidden');

    });

    $("input[name='pwd']").bind("input propertychange", function () {
      if ($("input[name='pwd']").val().length < 6 || $("input[name='pwd']").val().length > 10) {
        $("#warn1").css('visibility', 'visible');
      }
      else $("#warn1").css('visibility', 'hidden');

    });

  })
</script>

</html>